<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/swiper.min.css">
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
<title>我的收藏</title>
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<script src="<%=basePath%>assets/js/touchslider.js"></script>
<script src="<%=basePath%>assets/js/swiper.min.js"></script>
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>

<style>
body {
	padding-top: 1.6rem;
}

.content_cont ul li {
    padding: 3%;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
}
.content_cont ul .used {
    border-bottom: 10px solid #f1f1f1;
}

.shangjiatupian {
	width: 25%;
    float: left;
    height: 79px;
}

.shangjiajieshao {
	width: 70%;
    float: right;
    line-height: 0.4rem;
}

.goodsName {
	font-size: 0.24rem;
	line-height: 0.32rem;
	height: 0.64rem;
}

.dianpupaiming {
	font-size: 0.2rem;
	line-height: 0.36rem
}

.dianpubiaoqian {
	font-size: 0.18rem;
	border: 1px solid red;
	color: red;
	padding: 0.04rem;
	margin-left: 0.1rem;
}

.shanchucaozuo {
	font-size: 0.22rem;
	height: 0.42rem;
	line-height: 0.48rem;
	text-align: center;
	border: 1px solid #ccc;
	width: 1rem;
	float: right;
	border-radius: 0.1rem;
	margin-left: 4.6rem;
	margin-top: 1rem;
	position: absolute;
	
}

.quxiaoguanzhu {
	font-size: 0.22rem;
	height: 0.42rem;
	line-height: 0.48rem;
	text-align: center;
	border: 1px solid #ccc;
	width: 1rem;
	float: right;
	border-radius: 0.1rem;
	
}

.noSJ {
	width: 100%;
	height: 8rem;
}

.noSJ img {
	width: 50%;
	margin: 30% auto 10%;
	display: block
}

.noSJ h3 {
	width: 100%;
	font-size: 0.25rem;
	line-height: 0.6rem;
	font-weight: bold;
	text-align: center
}

.noSJ p {
	width: 100%;
	font-size: 0.24rem;
	line-height: 0.6rem;
	text-align: center
}

.shangjiaxinxi {
	width: 100%;
	padding: 3% 0 !important;
	position: relative;
}

.shangjiatouxiang {
	width: 0.8rem;
	height: 0.8rem;
	overflow: hidden;
	border-radius: 10%;
	float: left;
}

.shangjiatouxiang>img {
	width: 100%;
}

.shangjiatext {
	width: 84%;
	float: right;
	height: 0.6rem;
}

.shangjiatext_dianpuming {
	font-size: 0.3rem;
	height: 0.3rem;
	line-height: 0.28rem;
	margin-top: 0.1rem;
}

.shangjiatext_gengxinshijian {
	font-size: 0.24rem;
	height: 0.3rem;
	line-height: 0.3rem;
	color: #9e8686;
	margin-top: 0.12rem;
}

.jiage {
	color: red;
	font-size: 0.32rem;
	height: 0.4rem;
	line-height: 0.4rem;
}

.yuanjia {
	color: #ccc;
	font-size: 0.18rem;
	height: 0.4rem;
	line-height: 0.4rem;
	padding-right: 0.5rem;
	text-decoration: line-through
}

.shangpinxinxi {
	font-size: 0.22rem;
    line-height: 0.4rem;
    font-weight: bold;
    font-size: 14px;
    margin: 10px 0;
}

.zhanshitupian {
	height: 1.8rem
}

.favorite {
	height: 0.5rem;
	font-size: 0.3rem;
	padding-top: 0.2rem;
	border-top: 0.01rem solid #f1f1f1;
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	margin-right: 5px;
}

.swiper-slide img {
	width: 100%;
	height: 100%
}
/* -------------------------滑动切换的下横线----------------------
	.sideline {
		display: block;
		position: absolute;
		border: 0;
		height: 0.4rem;
		background-color: #FF3F25;
		left: 0;
		top: 0.76rem;
		pointer-events: none;
	}
*/

/* .li_list { */
/* 	min-height: 800px; */
/* } */

.price {
	position: absolute;
	top: 0.1rem;
	right: 0rem;
}
.nav ul li.active {
	color: orange;
	border-bottom: 0.02rem solid orange
}

.nav ul li.active a {
	color: orange;
}
/* .swipe{ padding:70px 0 0 0;} */
</style>
<script type="text/javascript">
	$(function() {
		$('.shangjiaxinxi>img').height($('.shangjiaxinxi>img').width())
	})
</script>
</head>
<body>
	<div class="header">
		<div class='header_top'>
			<a class=returnInfo href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
			我的收藏
		</div>
	</div>
	<div class="find_nav">
		<div class="find_nav_left">
			<div class="find_nav_list" id="pagenavi1">
				<ul>
					<li class="first active"><a>一手商品</a></li>
					<li class="second"><a>二手商品</a></li>
				</ul>

			</div>
		</div>
	</div>
	<div id="slider1" class="swipe">
		<ul class="box01_list">
			<li class="li_list aside1">
				<c:choose>
					<c:when test="${not empty favoritesList}">
						<div class="content">
							<div class="content_cont yishoushangpin">
								<ul id="ul">
									<c:forEach items="${favoritesList}" var="favoritesList">
										<li>
											<div class='shanchucaozuo' onclick="delFavorites($(this),0,${favoritesList.goodsId})">取消收藏</div>
											<a href="<%=basePath%>app/toGoodsInfo?goodsId=${favoritesList.goodsId}" class="clearFirx"> 
												<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${favoritesList.goodsThums}" alt="" class="shangjiatupian">
												<div class="shangjiajieshao">
													<h3 class="goodsName">${favoritesList.goodsName}</h3>
<!-- 													<div style="color: red;">￥ -->
<%-- 														<span style="font-size: 0.24rem;">${favoritesList.goodsPrice}</span> --%>
<!-- 													</div> -->
													<div class='clearFirx'>
														<span class="float_l" style="color: red;margin-top: 0.4rem">
															<i class="fa fa-rmb"></i>
															<i style="font-size: 16px;">${favoritesList.goodsPrice}</i>
														</span>
													</div>
												</div>
											</a>
										</li>
									</c:forEach>
								</ul>
							</div>
						</div>
					</c:when>
					<c:otherwise>
						<div class="noSJ">
							<img src="<%=basePath%>assets/images/bcz.png" alt="">
							<h3>您还没有收藏过哦！</h3>
						</div>
					</c:otherwise>
				</c:choose>
			</li>
			<li class="li_list aside2">
				<c:choose>
					<c:when test="${not empty favoritesUsedList}">
						<div class="content_cont">
							<ul>
								<c:forEach items="${favoritesUsedList}" var="favoritesUsedList">
									<li class="used">
										<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId=${favoritesUsedList.goodsId}">
											<div class="shangjiaxinxi clearFirx">
												<div class="shangjiatouxiang">
													<img
														src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${favoritesUsedList.userPhoto}"
														alt="">
												</div>
												<div class="shangjiatext">
													<div style="float: left;">
														<p class="shangjiatext_dianpuming">${favoritesUsedList.userName}</p>
														<p class="shangjiatext_gengxinshijian">
															<fmt:formatDate value='${favoritesUsedList.createDate}' pattern='yyyy-MM-dd HH:mm' />
														</p>
													</div>
												</div>
												<div class="price">
													<p class="jiage">
														<span style="font-size: 0.24rem;">￥</span>${favoritesUsedList.goodsPrice}</p>
												</div>
											</div>
											<div class="zhanshi">
												<div class="zhanshitupian">
													<!-- Swiper -->
													<div class="swiper-container">
														<div class="swiper-wrapper">
															<c:forTokens items="${favoritesUsedList.goodsImage}"
																delims="," var="imgPath">
																<div class="swiper-slide">
																	<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${imgPath}" alt="">
																</div>
															</c:forTokens>
														</div>
													</div>
												</div>
											</div>
											<div class="shangpinxinxi">${favoritesUsedList.goodsIntro}</div>
										</a>
										<div class="favorite clearFirx">
											<div class='quxiaoguanzhu' onclick="delFavorites($(this),1,${favoritesUsedList.goodsId})">取消收藏</div>
										</div>
									</li>
								</c:forEach>
							</ul>
						</div>
					</c:when>
					<c:otherwise>
						<div class="noSJ">
							<img src="<%=basePath%>assets/images/bcz.png" alt="">
							<h3>您还没有收藏过哦！</h3>
						</div>
					</c:otherwise>
				</c:choose>
			</li>
		</ul>
	</div>

</body>
<script type="text/javascript">

	$('.first a').css('color',"#FF3F25");
	$('.second').click(function(){
		$('.aside1').hide();
		$('.aside2').show();
		$('.second').addClass('active');
		$('.first').removeClass('active');
		$('.second a').css('color',"#FF3F25");
		$('.first a').css('color',"");
	});
	$('.first').click(function(){
		$('.aside2').hide();
		$('.aside1').show();
		$('.first').addClass('active');
		$('.second').removeClass('active');
		$('.second a').css('color',"");
		$('.first a').css('color',"#FF3F25");
	});
	$('.shangpinxinxi').each(function() {
		var text = $(this);
		text.text(showText(text.text(), 50));
	})
	$('.yishoushangpin').find('li .shangjiajieshao').each(function() {
		var goodsNameHtml = $(this).find('.goodsName').html();
		$(this).find('.goodsName').html(showText(goodsNameHtml, 31))
	});
	var swiper = new Swiper('.swiper-container', {
		slidesPerView : 3.5,
		spaceBetween : 10,
		pagination : {
			clickable : true,
		},
	});
	$(document).ready(function(){
		$('.aside2').hide();
	});

/*------------------------------------------滑动切换------------------------------------------

	$(".find_nav_list").css("left", 0);

	$(".find_nav_list li").each(function() {
		$(".sideline").css({
			left : 0
		});
		$(".find_nav_list li").eq(0).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
	});
	var nav_w = $(".find_nav_list li").first().width();
	$(".sideline").width(nav_w);
	$(".find_nav_list li").on('click',function() {
		nav_w = $(this).width();
		$(".sideline").stop(true);
		$(".sideline").animate({
			left : $(this).position().left
		}, 300);
		$(".sideline").animate({
			width : nav_w
		});
		$(this).addClass("find_nav_cur").siblings().removeClass(
				"find_nav_cur");
		var fn_w = ($(".find_nav").width() - nav_w) / 2;
		var fnl_l;
		var fnl_x = parseInt($(this).position().left);
		if (fnl_x <= fn_w) {
			fnl_l = 0;
		} else if (fn_w - fnl_x <= flb_w - fl_w) {
			fnl_l = flb_w - fl_w;
		} else {
			fnl_l = fn_w - fnl_x;
		}
		$(".find_nav_list").animate({
			"left" : fnl_l
		}, 300);

	});
	var fl_w = $(".find_nav_list").width();
	var flb_w = $(".find_nav_left").width();
	$(".find_nav_list").on('touchstart', function(e) {
		var touch1 = e.originalEvent.targetTouches[0];
		x1 = touch1.pageX;
		y1 = touch1.pageY;
		ty_left = parseInt($(this).css("left"));
	});
	$(".find_nav_list").on('touchmove', function(e) {
		var touch2 = e.originalEvent.targetTouches[0];
		var x2 = touch2.pageX;
		var y2 = touch2.pageY;
		if (ty_left + x2 - x1 >= 0) {
			$(this).css("left", 0);
		} else if (ty_left + x2 - x1 <= flb_w - fl_w) {
			$(this).css("left", flb_w - fl_w);
		} else {
			$(this).css("left", ty_left + x2 - x1);
		}
		if (Math.abs(y2 - y1) > 0) {
			e.preventDefault();
		}
	});

	for (n = 1; n < 9; n++) {
		var page = 'pagenavi' + n;
		var mslide = 'slider' + n;
		var mtitle = 'emtitle' + n;
		arrdiv = 'arrdiv' + n;
		var as = document.getElementById(page).getElementsByTagName('a');
		var tt = new TouchSlider({
			id : mslide,
			'auto' : '-1',
			fx : 'ease-out',
			direction : 'left',
			speed : 600,
			timeout : 5000,
			'before' : function(index) {
				var as = document.getElementById(this.page)
						.getElementsByTagName('a');
				as[this.p].className = '';
				this.p = index;

				fnl_x = parseInt($(".find_nav_list li").eq(this.p)
						.position().left);

				nav_w = $(".find_nav_list li").eq(this.p).width();
				$(".sideline").stop(true);
				$(".sideline").animate(
						{
							left : $(".find_nav_list li").eq(this.p)
									.position().left
						}, 300);
				$(".sideline").animate({
					width : nav_w
				}, 100);
				$(".find_nav_list li").eq(this.p).addClass(
						"find_nav_cur").siblings().removeClass(
						"find_nav_cur");
				var fn_w = ($(".find_nav").width() - nav_w) / 2;
				var fnl_l;
				if (fnl_x <= fn_w) {
					fnl_l = 0;
				} else if (fn_w - fnl_x <= flb_w - fl_w) {
					fnl_l = flb_w - fl_w;
				} else {
					fnl_l = fn_w - fnl_x;
				}
				$(".find_nav_list").animate({
					"left" : fnl_l
				}, 300);
			}
		});
		tt.page = page;
		tt.p = 0;
		//console.dir(tt); console.dir(tt.__proto__);

		for (var i = 0; i < as.length; i++) {
			(function() {
				var j = i;
				as[j].tt = tt;
				as[j].onclick = function() {
					this.tt.slide(j);
					return false;
				}
			})();
		}
	}
	----------------------------------------------滑动切换结束----------------------------------------
*/

	function showText(text, numSub) {
		if (text == null) {
			return "";
		}
		if (text.length > numSub) {
			return text.substring(0, numSub) + "...";
		}
		return text;
	}
	
	//取消收藏
	function delFavorites(obj,favoriteType,goodsId){
		if(favoriteType == 0){
			$(obj).parent().remove();
		}else{
			$(obj).parent().parent().remove();
		}
		$.ajax({
	    	url: "<%=basePath%>app/focusAndCancelFocus",
	        type: 'post',
	        data: {
	        	"targetId":goodsId,
	        	"favoriteType":0
	        },
	        dataType: 'json',
	        success: function (data) {
	        	if(data.state==2){
	      		  	layer.open({
		  			    content: '取消收藏成功'
		  			    ,skin: 'msg'
		  			    ,time: 2 //2秒后自动关闭
  			  		});
	        	}else{
       		  		layer.open({
	       			    content: '取消收藏失败'
	       			    ,skin: 'msg'
	       			    ,time: 2 //2秒后自动关闭
       			  	});
	        	}
	        },error:function (){
	        	layer.open({
       			    content: '网络错误'
       			    ,skin: 'msg'
       			    ,time: 2 //2秒后自动关闭
   			  	})
	        }
		});
	};
	
</script>
</html>